<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>清分上传记录 </title>

    <link rel="stylesheet" th:href="@{/static/iview/iview.css}">
    <script th:src="@{/static/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/libs/vue.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/layer/layer.js}" type="text/javascript"></script>
   <script th:src="@{/static/iview/iview.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/common.js}" type="text/javascript"></script>
    <style type="text/css">
	[v-cloak] {
			  display: none;
			}
	</style>
</head>
<body>
<div id="app" v-cloak>
        <div style="margin-bottom: 6px;margin: 30px">
			<i-input v-model="content" placeholder="文件"  style="width: 200px"></i-input>
		    <i-select  v-model="type"  style="width: 100px" @on-change="changupdownlist"  placeholder="类型">
		              <i-option v-for="item in typelist"  :value="item.id"  :key="item.value">{{item.value}} </i-option>
		     </i-select> 
		     <i-select  v-model="transtype"  style="width: 100px" @on-change="changtranstypelist"  placeholder="交易" >
		              <i-option v-for="item in transtypelist"  :value="item.id"  :key="item.value">{{item.value}} </i-option>
		     </i-select> 
		      <i-select  v-model="response"  style="width: 140px" @on-change="changresponselist"  placeholder="响应状态">
		              <i-option v-for="item in responselist"  :value="item.id"  :key="item.value">{{item.id}} - {{item.value}} </i-option>
		     </i-select> 
		     <date-picker type="datetime" v-model="startTime" placeholder="开始时间" :options="startTimeOption" @on-change="onStartTimeChange"   style="width: 153px" ></date-picker>
		    -
		     <date-picker type="datetime" v-model="endTime" placeholder="结束时间" :options="endTimeOption" @on-change="onEndTimeChange"   style="width: 153px" ></date-picker>
			<i-button type="primary" @click="search()" icon="ios-search">搜索</i-button>
			<i-button type="primary" @click="empty()" icon="ios-close-empty">清空</i-button>
		</div>
		<div style="margin-bottom: 6px;margin: 30px">
			<template> 
				<i-table border :content="self" :columns="tableTitle" :data="datalist"></i-table>
			 	<br>
<!-- 			 	<Page :total="dataCount" :page-size="pageSize" show-total @on-change="changepage" @on-page-size-change="changePageSize"></Page> -->
			 	<!--分页功能-->
				<Page :current="1" :total="dataCount" :page-size="pageSize"  @on-change="changepage"  @on-page-size-change="changePageSize"  show-elevator show-sizer show-total></Page>
				 
			</template>
		</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : '#app',
	data : {
		content : '',
		pageNo : 0,
		pageSize : 10,// 每页显示多少条
		dataCount:"", // 总数据的条目
		datalist: [], //接口获取的总数据
		historyData:'',//展示的数据 
		transtype:'',
	    transtypelist:[],
		type:'',
		typelist:[
			{"id":"","value":"请选择"},
			{"id":"4401","value":"原始交易"},
			{"id":"4402","value":"刷卡交易"},
			{"id":"4403","value":"其他交易"},
			{"id":"4404","value":"冲正交易"}
		], 
		transtype:'',
		transtypelist:[], 
		response:'',
		responselist:[
			{"id":"","value":"请选择"},
			{"id":"0","value":"请求未响应"},
			{"id":"200","value":"成功"},
			{"id":"408","value":"请求超时"},
			{"id":"716","value":"响应失败"},
			{"id":"951","value":"md5校验失败"},
			{"id":"952","value":"效验错误"},
			{"id":"953","value":"请求文件为空"},
			{"id":"954","value":"请求文件名与上传文件名不一致"},
			{"id":"999","value":"未知错误"},
			{"id":"1003","value":"格式正确内容错误"},
			{"id":"1004","value":"重复交易"}
			],
		startTime: '',
        endTime: '',
        startTimeOption: {},
        endTimeOption: {},
		tableTitle:[ 
		{
		   title : "编号",
		   type: 'index',
		   align: 'center',
           width: 70
		 },
		 {
				key : "fileVersion",
				title : "版本",
				width : 155
		}, 
		{
			key : "fileName",
			title : "文件名",
			width : 155
		}, 
		{
			key : "dataType",
			title : "交易类型",
			width : 140,
			render : function(h, params) {
				var text = "未定义";
				if(params.row.dataType == 4401){
					text ="原始交易";
				}else if(params.row.dataType == 4402){
					text ="刷卡交易";
				}else if(params.row.dataType == 4403){
					text =" 其他交易";
				}else if(params.row.dataType == 4404){
					text ="冲正交易";
				}
				return h('div',params.row.dataType + " - "+text);
			}
		}, 
		{
			key : "transTypeCode",
			title : "类型交易",
			width : 140,
			render : function(h, params) {
				var text = "未定义";
				if(params.row.transTypeCode == 1){
					text ="基于一";
				}else if(params.row.transTypeCode == 2){
					text ="刷卡交易";
				}else if(params.row.transTypeCode == 3){
					text ="基于二";
				}else if(params.row.transTypeCode == 4){
					text ="基于三";
				}else if(params.row.transTypeCode == 5){
					text ="基于四";
				}else if(params.row.transTypeCode == 12){
					text ="移动支付交易";
				}else if(params.row.transTypeCode == 13){
					text ="现金交易";
				}else if(params.row.transTypeCode == 14){
					text ="冲正交易";
				}
				return h('div',params.row.transTypeCode + " - "+text);
			}
		},
		{
			key : "messageId",
			title : "包号",
			width : 90
		}, 
		{
			key : "requestTime",
			title : "请求时间",
			width : 150,
			render : function(h, params) {
				var text = "";
				if(params.row.requestTime !=null){
					 text =  formatDate(new Date(params.row.requestTime),'yyyy-MM-dd hh:mm:ss') ;
				}
				return h('div',text);
			}
		}, 
		 {
			key : "notifyTime",
			title : "响应时间",
			width : 150,
			render : function(h, params) {
				var timer = '------------------';
				if(params.row.notifyTime !=null){
					timer = formatDate(new Date(params.row.notifyTime),'yyyy-MM-dd hh:mm:ss');
				}
			    return h('div',timer);
			}
		}, 
		{
			key : "status",
			title : "响应状态",
			width : 100,
			render : function(h, params) {
				var text = "失败"
				if(params.row.status == 200){
					text = "成功"
				}
				return h('div',text+" [ "+params.row.status +" ] ");
			}
		}, 
		{
			key : "responseInfo",
			title : "响应信息",
			width : 150,
			render : function(h, params) {
					if( params.row.errCont != ""){
						 return h('div', [
							  h('a',{on:{click: (e) =>{
								   var el = e.currentTarget;
								   var  icon = el.nextElementSibling;						
								   var  text = el.nextElementSibling.nextElementSibling;
								     
					        	   if(icon.style.display == 'none'){
					        		   icon.style.display = "inline-block";
					        		   el.innerText = '收缩';
						        	   el.innerHTML= '收缩';
					        	   }else{
					        		   icon.style.display = "none";
					        		   el.innerText = '展开';
					        		   el.innerHTML= '展开';
					        	   }
					        	   
					        	   //缩略图
					        	   if(text.style.display == 'none'){
					        		   text.style.display = "inline-block";
					        		   el.innerText = '展开';
					        		   el.innerHTML= '展开';
					        	   }else{
					        		   text.style.display = "none";
					        		   el.innerText = '收缩';
					        		   el.innerHTML= '收缩';
					        		
					        	   }
					        }}},"展开"),
							 //隐藏起来
							 h('span', { style: { display: 'none' },attrs:{"ref": "shows"}, },params.row.responseInfo),
							 //显示部分
						     h('span', {
						        	 slot: 'content',
						            style: {
					                    display: 'inline-block',
					                    width: params.column._width*0.9+'px',
					                    overflow: 'hidden',
					                    textOverflow: 'ellipsis',
					                    whiteSpace: 'nowrap'
					                } 
						        },params.row.responseInfo)
						      
						    ]);
					}
			} 
		},
		{
			key : "createTime",
			title : "创建时间",
			width : 150,
			render : function(h, params) {
				var text = "";
				if(params.row.createTime !=null){
					 text =  formatDate(new Date(params.row.createTime),'yyyy-MM-dd hh:mm:ss') ;
				}
				return h('div',text);
			}
		}, 
		]
		
	},
	methods : {
		search : function(){
			this.loadlist(1);
		},
		empty : function(){
			vm.content = '';
			vm.type = '';
			vm.transtype='';
			vm.updown = '';
			
			vm.response = '';
			vm.startTime='';
			vm.endTime='';
			
			this.loadlist(1);
		},
		//任务列表(自行实现分页)
		loadlist : function(index) {
			var page = {};
			page['pageIndex']= (index == 'undefind' ? 0: index) ;
			page['pageSize']= this.pageSize;
					
			var params = {};
			
			
		   //文件
			if(this.conten!=''){
				if(!isNaN(this.content)){
					params['fileVersion'] = this.content.trim();
				}else{
					params['fileName'] = this.content.trim();
				}
			}	
		   
		   //类型
		   if(this.type !=''){
			   params['dataType'] = parseInt(this.type);
		   }
			//交易类型
			if(this.transtype!=''){
				params['transTypeCode']=parseInt(this.transtype);
			}
			//响应
			if(this.response!=''){
				params['status']=parseInt(this.response);
			}	
			
			//时间
			if(this.startTime !=''){
				params['beginTime'] =  formatDate(new Date(this.startTime),'yyyy-MM-dd hh:mm:ss');
			}	
			if(this.endTime !=''){
				params['endTime'] =  formatDate(new Date(this.endTime),'yyyy-MM-dd hh:mm:ss');
			}		
			if(this.startTime !='' && this.endTime ==''){
				params['endTime'] = formatDate(new Date(),'yyyy-MM-dd hh:mm:ss'); 
			}else if(this.startTime =='' && this.endTime !=''){
				params['beginTime'] = formatDate(new Date(),'yyyy-MM-dd hh:mm:ss'); 
			}
			 
			
			 var conditional = {};
			 conditional['page'] = page;
			 conditional['params'] = params;
			 
			var json =  JSON.stringify(conditional);
			
			$.ajax({
				url:"../clear/getClearSendRecords",
				type:"post",
				dataType: "json",
				contentType: 'application/json', 
				data: json,
				success: function(data) {
					vm.datalist = data.result.rows;
					vm.dataCount = data.result.total; 
				}
			});
		}, 
		/* transtypedroplist:function(){
    		$.ajax({
				url:"../monitor/loadTransTypeCodeDropList",
				type:"get",
				contentType: 'application/json', 
				success: function(data) {
						if(data.result != null){
							vm.transtypelist = data.result;
						}
				}
			});
       }, */
		 //页数变化的时候改变每一页的内容
        changepage(index){
			this.loadlist(index);
        },
      //修改每页显示条数时调用
        changePageSize(num) { 
           this.pageSize = num;
           this.changepage(1);
       }, 
       changtranstypelist:function(value){
    	   vm.transtype=value;
       },
       changupdownlist:function(value){
    	   vm.updown = value;
    	   if(value == 4401){
    		   vm.transtypelist = [
    			   {"id":"","value":"请选择"},
    			   {"id":"1","value":"基于一"},
    			   {"id":"2","value":"基于二"},
    			   {"id":"3","value":"基于三"},
    			   {"id":"4","value":"基于四"}
    			   ];
    	   }else if(value == 4402){
    		   vm.transtypelist = [
    			   {"id":"","value":"请选择"},
    			   {"id":"2","value":"刷卡交易"}
    			   ];
    	   }else  if(value == 4403){
    		   vm.transtypelist = [
    			   {"id":"","value":"请选择"},
    			   {"id":"12","value":"移动支付交易"},
    			   {"id":"13","value":"现金交易"},
    			   ];
    	   }else  if(value == 4404){
    		   vm.transtypelist = [
    			   {"id":"","value":"请选择"},
    			   {"id":"14","value":"其他冲正交易"}
    			   ];
    	   }else{
    		   vm.transtypelist = [{"id":"","value":"请选择"}];
    	   }
       },
       changresponselist:function(value){
    	   vm.respons = value;
       },
       onStartTimeChange(startTime, type) {
           this.endTimeOption = {
               disabledDate(endTime) {
                   return endTime < new Date(startTime) || endTime > Date.now();
               }
           }
       },
       onEndTimeChange(endTime, type) {
           this.startTimeOption = {
               disabledDate(startTime) {
                   return startTime > new Date(endTime) || startTime > Date.now();
               }
           }
       },
		edit : function(quartz){
			dialogOpen({
				title: '修改',
				url: 'task/add.shtml',
				//屏幕小 滚动条显示
				scroll : true,
				width: '450px',
				height: '450px',
				success : function(iframeId){
					top.frames[iframeId].vm.formQuartz = quartz;
				},
				yes : function(iframeId) {
					top.frames[iframeId].vm.acceptClick();
				},
			});
		}
	},
	created : function() {
		 this.loadlist(1);
       /*   this.changepage(0); */
	}
})

</script>
</body>
</html>